<template>
  <ContentWrap
    class="mb-0!"
    :class="[
      footer
        ? '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height)-10px)]'
        : '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-20px)]'
    ]"
    :bodyStyle="{ height: '100%', padding: '10px' }"
  >
    <UserBasicInfo
      :user="shopUser"
      :wallet="wallet"
      @edit="openForm('update', shopUser.id)"
      @buy-member-ship="handleBuyMemberShip"
    >
      <template #footer>
        <el-row :gutter="10" class="mt-10px w-full mx-0!">
          <el-col :span="8">
            <el-button
              size="large"
              type="primary"
              @click="handleRecharge"
              class="w-full custom-text-18 h-50px!"
            >
              充值
            </el-button>
          </el-col>
          <el-col :span="8">
            <el-button
              @click="handleDepositPick"
              size="large"
              type="primary"
              class="w-full custom-text-18 h-50px!"
            >
              寄存/提货
            </el-button>
          </el-col>
          <el-col :span="8">
            <slot name="backButton"
              ><el-button
                @click="reset"
                size="large"
                plain
                type="primary"
                class="w-full custom-text-18 h-50px!"
              >
                返回
              </el-button></slot
            >
          </el-col>
        </el-row>
      </template>
    </UserBasicInfo>
  </ContentWrap>

  <!-- 修改用户等级弹窗 @success="getList" -->
  <UserLevelUpdateForm ref="updateLevelFormRef" />
  <!-- 修改用户积分弹窗 @success="getList" -->
  <UserPointUpdateForm ref="updatePointFormRef" />
  <!-- 修改用户余额弹窗  @success="getList" -->
  <UserBalanceUpdateForm ref="UpdateBalanceFormRef" />
  <!-- 发送优惠券弹窗 -->
  <CouponSendForm ref="couponSendFormRef" />
</template>
<script lang="ts" setup>
import * as UserApi from '@/api/shop/member/user'
import * as WalletApi from '@/api/pay/wallet/balance'

import UserLevelUpdateForm from '@/views/member/user/components/UserLevelUpdateForm.vue'
import UserPointUpdateForm from '@/views/member/user/components/UserPointUpdateForm.vue'
import UserBalanceUpdateForm from '@/views/member/user/components/UserBalanceUpdateForm.vue'
import UserBasicInfo from './components/UserBasicInfo.vue'
import { CouponSendForm } from '@/views/mall/promotion/coupon/components'
/** 门店会员信息 */
import { useShopUserStoreWithOut } from '@/store/modules/shop/user'
const shopUserStore = useShopUserStoreWithOut()
const shopUser = computed(() => {
  return shopUserStore.getUser
})
const isSetUser = computed(() => {
  return shopUserStore.getIsSetUser
})
import { useAppStore } from '@/store/modules/app'
import { ElMessageBox } from 'element-plus'
const appStore = useAppStore()
const footer = computed(() => appStore.getFooter)
defineOptions({ name: 'MemberUser' })

const updateLevelFormRef = ref() // 修改会员等级表单
const updatePointFormRef = ref() // 修改会员积分表单
const UpdateBalanceFormRef = ref() // 修改用户余额表单
// 付费会员购买
const emits = defineEmits(['buyMemberShip', 'setUserInfo'])

const handleBuyMemberShip = () => {
  emits('buyMemberShip')
}
/** 重置按钮操作 */
const reset = () => {
  shopUserStore.resetState()
}

/** 打开会员详情 */
const { currentRoute, push } = useRouter() // 路由跳转

/** 添加/修改操作 */
const openForm = (type: string, id?: number) => {
  emits('setUserInfo', type, id)
}
// 充值
const handleRecharge = () => {
  let path = currentRoute.value.path

  push({
    name: 'ShopRecharge',
    query: {
      returnUrl: encodeURIComponent(path)
    }
  })
}

/**打开寄存提货 */
const handleDepositPick = () => {
  let path = currentRoute.value.path
  ElMessageBox.confirm('请选择寄存或提货操作', '提示', {
    confirmButtonText: '寄 存',
    cancelButtonText: '提 货'
  })
    .then(async () => {
      push({
        name: 'ShopDepoist',
        query: {
          returnUrl: encodeURIComponent(path)
        }
      })
    })
    .catch(() => {
      push({
        name: 'ShopPick',
        query: {
          returnUrl: encodeURIComponent(path)
        }
      })
    })
}

/* 用户钱包相关信息 */
const WALLET_INIT_DATA = {
  balance: 0,
  totalExpense: 0,
  totalRecharge: 0
} as WalletApi.WalletVO // 钱包初始化数据
const wallet = ref<any>(WALLET_INIT_DATA) // 钱包信息
/** 查询用户钱包信息 */
const getUserInfo = async () => {
  if (!isSetUser.value) {
    wallet.value = WALLET_INIT_DATA
    return
  }
  let id = shopUser.value.id
  let data = await UserApi.getUser(id)
  let walletInfo = {
    balance: 0
  }
  shopUserStore.setUserInfoAction(data)
  wallet.value = walletInfo || WALLET_INIT_DATA
}

onMounted(() => {
  getUserInfo()
})
</script>
